<template>
	<div class="banner_data">
		<head-back-title title="海报详情"></head-back-title>
		<el-card>
			<el-form :model="posterForm" ref="posterForm" :rules="posterFormRules" label-width="120px">
				<el-row>
					<div class="title">海报基本信息</div>
				</el-row>
				<el-row>
					<el-col :xs="18" :sm="10" :lg="5">
						<el-form-item label="排序:" prop="sort">
							<el-input v-model="posterForm.sort" placeholder="请输入排序"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :xs="18" :sm="10" :lg="5">
						<el-form-item label="状态:" prop="type">
							<el-select v-model="posterForm.type" placeholder="请选择">
								<el-option v-for="item in typeOptions" :key="item.type" :label="item.label" :value="item.type"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :xs="18" :sm="10" :lg="5">
						<el-form-item label="状态:" prop="status">
							<el-select v-model="posterForm.status" placeholder="请选择">
								<el-option v-for="item in options" :key="item.status" :label="item.label" :value="item.status"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="上传图片:" class="upload-box" prop="image">
							<div class="case-img-upload">
								<div class="case-img-upload-btns">
									<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } "
									 multipleaccept="image/*" :on-change="onchange">
										<el-button type="primary" size="small">上传图片</el-button>
									</el-upload>
									<el-button type="danger" size="small" @click="rest">重置</el-button>
									<div class="el-upload__tip">小于1MB</div>
								</div>
								<div class="case-img-upload-imgs-info">
									<el-image v-if="!image.length">
										<div slot="error"></div>
									</el-image>
									<div class="vice_big_box" v-else>
										<el-image :src="image" fit="contain"></el-image>
									</div>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-button type="primary" @click="submitForm('posterForm')" style="margin-left: 40px;" v-if="this.$route.query.isAdd == 1">添加</el-button>
				<el-button type="primary" @click="submitForm('posterForm')" style="margin-left: 40px;" v-else>修改</el-button>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				image: '',
				posterForm: {
					sort: 0,
					status: 1,
					image: '',
					type:0
				},
				options: [{
						status: 1,
						label: '上架'
					},
					{
						status: 2,
						label: '下架'
					}
				],
				typeOptions: [{
						type: 0,
						label: '默认'
					},
					{
						type: 1,
						label: '邀请好友'
					},
					{
						type: 2,
						label: '推广产品'
					},
					{
						type: 3,
						label: '推广套餐'
					}
				],
				posterFormRules: {
					sort: [{
						required: true,
						message: '请输入排序'
					}],
					status: [{
						required: true,
						message: '请选择状态'
					}],
					type: [{
						required: true,
						message: '请选择类型'
					}],
					image: [{
						required: true,
						message: '请上传图片'
					}]
				}
			};
		},
		methods: {
			// 图片上传
			upload(params) {
				//console.log(params);
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt1MB = file.size / 1024 <= 1024;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt1MB) {
					this.$message.error('图片不能大于1M');
					return;
				}

				this.posterForm.image = new FormData();
				this.posterForm.image.append('file[]', file);
			},
			onchange(file, fileList) {
				let isJPGPNG = file.raw.type === 'image/jpeg' || 'image/png',
					isLt1MB = file.size / 1024 <= 1024;
				if (!isJPGPNG) {
					return;
				}
				if (!isLt1MB) {
					return;
				}

				var event = event || window.event;
				var file = event.target.files[0];
				var reader = new FileReader();
				//转base64
				reader.onload = e => {
					this.image = e.target.result; //将图片路径赋值给src
				};
				reader.readAsDataURL(file);
			},

			// 重置图片
			rest() {
				this.image = '';
				this.posterForm.image = ''
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.$route.query.isAdd == 0) {
							delete this.posterForm.add_time
							delete this.posterForm.store_id
							delete this.posterForm.user_id
							if (this.image == this.posterForm.image) {
								this.$http(this.$ApiList.UpdatePoster, this.posterForm).then(res => {
									this.$layer.msg('修改成功');
									this.$router.push('/poster_list');
								});
							} else {
								this.$http(this.$ApiList.publicUpload, this.posterForm.image).then(res => {
									this.posterForm.image = res.datas[0];
									this.$http(this.$ApiList.UpdatePoster, this.posterForm).then(res => {
										
											this.$layer.msg('提交成功');
											this.$router.push('/poster_list');
										
									});
								});
							}
						} else {
							this.$http(this.$ApiList.publicUpload, this.posterForm.image).then(res => {
								this.posterForm.image = res.datas[0];
								this.$http(this.$ApiList.AddPoster, this.posterForm).then(res => {
									
										this.$layer.msg('添加成功');
										this.$router.push('/poster_list');
									
								});
							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			getBannerDetails(id) {
				let data = {
					poster_id: id
				};
				this.$http(this.$ApiList.PosterInfo, data).then(res => {
					this.posterForm = res.datas;
					this.image = res.datas.image;
				});
			}
		},
		created() {
			if (this.$route.query.isAdd == 0) {
				this.getBannerDetails(this.$route.query.id);
			}
		}
	};
</script>
<style lang="scss">
	.banner_data {
		.last {
			margin-bottom: 0;
		}

		.upload-drag {
			.el-upload {
				vertical-align: top;
			}

			.el-upload__tip {
				line-height: normal;
			}
		}

		.case_upload {
			display: flex;
			flex-wrap: wrap;

			.el-col {}
		}

		.el-select {
			display: block;
		}

		.upload-box {
			padding-left: 40px;

			.case-img-upload {
				display: flex;

				.case-img-upload-imgs {
					flex: 1;
					align-items: flex-start;

					.el-image {
						width: 140px;
						height: 140px;
						border: solid 1px #e5e5e5;
						margin-left: 25px;
						vertical-align: top;
					}
				}

				.case-img-upload-imgs-info {
					width: 100%;
					max-width: 660px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					min-height: 390px;

					.case-img-upload-imgs-info-box {
						position: relative;

						.el-icon-error {
							position: absolute;
							font-size: 20px;
							color: #ef3030;
							right: 5px;
							top: 5px;
							z-index: 1;
							background-color: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.el-image {
						width: 100%;
						vertical-align: top;
					}
				}

				.vice_big_box {
					position: relative;
					display: inline-block;
					vertical-align: top;
					margin-bottom: 20px;

					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
			}

			.el-upload__tip {
				width: 80px;
				text-align: center;
			}

			.el-form-item__label {
				float: none;
			}

			.el-form-item__content {
				margin-left: 0 !important;

				.el-button--danger {
					width: 80px;
					background-color: #37c1d6;
					border-color: #37c1d6;
				}
			}
		}
	}
</style>
